<template>
 <!-- 只能有一个根标签 -->
 <div>
    <el-card>
      <!-- 顶部栏 -->
      <el-form :inline='true' :model="page"
      v-loading="loading"
      ref="formcontent"
      >
          <el-form-item label="标签名称" prop="tagName">
            <el-input style="width: 200px;" v-model="page.tagName">
            </el-input>
          </el-form-item>
          <el-form-item label='状态' prop="state">
            <el-select
            placeholder='请选择'
            v-model="page.state"
            >
              <el-option label='启用' value='1'></el-option>
              <el-option label='禁用' value='0'></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
         <el-button @click="resetForm">清除</el-button>
            <el-button type='primary' @click="searchForm">搜索</el-button>
          </el-form-item>
          <el-button
              class="filter-item fr"
              size="small"
              style="margin-left: 10px;"
              type="success"
              icon="el-icon-edit"
              @click="getAdd"
            >新增标签</el-button>
      </el-form>
      <!-- 数据条数提示 -->
    <el-alert
      :title="alertText"
      :closable="false"
      type="info"
      show-icon>
    </el-alert>
    <!-- 表格 -->
      <el-table
      :data="tableData"
       style="width: 100%"
      >
       <el-table-column
         fixed
         label="序号"
         type="index"
         width="100">
       </el-table-column>
       <el-table-column
         fixed
         label="所属学科"
         prop="subjectName"
         width="200">
       </el-table-column>
       <el-table-column
         fixed
         label="标签名称"
         prop="tagName"
         width="200">
       </el-table-column>
       <el-table-column
         fixed
         label="创建者"
         prop="username"
         width="200">
       </el-table-column>
       <el-table-column
         fixed
         label="创建日期"
         prop="addDate"
         :formatter="getTime"
         width="220">
       </el-table-column>
       <el-table-column
         fixed
         label="状态"
         prop="state"
         :formatter="getState"
         width="180">
       </el-table-column>
       <el-table-column
         fixed
         label="操作"
         prop=""
         width="210">
         <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" >{{scope.row.state === 1? '禁用' : '启用'}}</el-button>
        <el-button type="text" :disabled="scope.row.state === 1" @click="changeContent(scope.row.id)">修改</el-button>
        <el-button type="text" :disabled="scope.row.state === 1" @click.native.prevent="deleteRow(scope.row.id)">删除</el-button>
      </template>
       </el-table-column>
      </el-table>
<!-- 分页器 -->
      <el-pagination
      style="text-align: right;"
        background
        layout="  prev, pager, next, sizes, jumper"
        :total="page.total"
        :page-sizes="[5,10,20,50]"
        :page-size="page.pagesize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-card>
    <!-- 新增弹框 -->
    <el-dialog :title="format.id ? '修改标签' : '新增标签'" :visible.sync="dialogFormVisible"
    width="480px" >
  <el-form :model="format" :rules="ruleInline"  ref="dataForm">
    <el-form-item label="所属学科" prop="subjectID">
      <el-select v-model="format.subjectID" placeholder="请选择">
        <el-option
         v-for="item in subjects"
         :key="item.value"
         :label="item.label"
         :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
      <el-input v-model="format.tagName" autocomplete="off"
      style="width:51%"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="btnCancel">取 消</el-button>
    <el-button type="primary" @click="btnOk">确 定</el-button>
  </div>
</el-dialog>
 </div>
</template>

<script>
import { getTagslist, getSubject, add, changeState, remove, getTags, changeContent } from '@/api/base/tags'
import moment from 'moment'
export default {
  name: 'TagsPage',
  data () {
    return {
      alertText: '',
      loading: false,
      tableData: [],
      currentPage: 1,
      page: {
        page: 1,
        pagesize: 10,
        total: 0,
        tagName: ''

      },
      format: {
        subjectName: '',
        id: '',
        tagName: '',
        subjectID: ''
      },

      dialogFormVisible: false,
      subjects: [],
      ruleInline: {
        tagName: [
          { required: true, message: '标签名不能为空', trigger: 'blur' }
        ],
        subjectID: [
          { required: true, message: '所属学科不能为空' }
        ]
      }

    }
  },
  created () {
    // 页面一刷新就拉取数据
    this.getTagslist()
  },
  methods: {
    // 获取标签列表数据
    async getTagslist () {
      this.loading = true
      const { data } = await getTagslist(this.page)
      // console.log(data)
      this.page.total = data.counts
      this.alertText = `数据共 ${this.page.total} 条`
      this.tableData = data.items
      this.loading = false
    },

    // 分页,每页条数
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getTagslist()
    },
    // 点击页码重新拉数据
    handleCurrentChange (newPage) {
      this.page.page = newPage
      this.getTagslist()
    },
    // 格式时间
    getTime (row, column, cellValue, index) {
      return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    // 格式状态
    getState (row, column, cellValue, index) {
      return cellValue === 1 ? '已启用' : '已禁用'
    },
    // 清除表单
    resetForm () {
      this.page.tagName = ''
      this.page.state = null
      // this.$refs.formcontent.resetFields()
    },
    // 搜索
    async searchForm () {
      await this.getTagslist()
    },
    // 新增按钮
    getAdd () {
      this.dialogFormVisible = true
      // 获取所属学科列表
      getSubject().then(data => {
        this.subjects = data.data
        // console.log(this.subjects)
      })
    },
    // 弹框确定
    async btnOk () {
      try {
        await this.$refs.dataForm.validate()
        if (this.format.id) {
        // 修改
          await changeContent(this.format)
        } else {
        // 新增
          await add(this.format)
        }

        this.getTagslist(this.page)
        this.$message.success('操作成功')
        this.dialogFormVisible = false
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 弹框取消按钮
    btnCancel () {
      this.format = {
        subjectName: '',
        id: '',
        tagName: '',
        subjectID: ''
      }
      this.dialogFormVisible = false
    },

    // 切换启用禁用
    async handleClick (row) {
      // console.log(row)
      try {
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (e) {
        this.$message.error('请求错误!')
      }
    },
    // 修改回显
    changeContent (rowId) {
      this.dialogFormVisible = true
      getTags({ id: rowId }).then(data => {
        this.format.id = data.data.id
        this.format.state = data.data.state
        this.format.subjectID = data.data.subjectID
        this.format.tagName = data.data.tagName
      })
      // 获取所属学科列表
      getSubject().then(data => {
        this.subjects = data.data
      })
    },
    // 删除
    async deleteRow (id) {
      try {
        // console.log(id)
        await remove(id)
        await this.getTagslist(this.page)
        this.$message.success('删除成功!')
      } catch (error) {
        this.$message.error('删除失败!')
      }
    }
  }
}
</script>

<style scoped>

</style>
